<!DOCTYPE html>
<html>
<head>
	<title>我的-照片忆书</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/photoBottom.css">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/havePhoto.css">
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/qrjs2.min.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js">
	</script>
	<style type="text/css">
	.chuangTime{
		position: relative;
	}
	.del_photo{
		position: absolute;
		right:0.2rem;
	}  
	.imgbox1{
	    width: 2.83rem;
    	height: 1.75rem;
	    position: absolute;
	    top: 2.19rem;
	    left: 0.1rem;
	    overflow: hidden;
	}
	.imgbox2{
		width: 2.6rem;
	    height: 2.7rem;
	    position: absolute;
	    top: 0.69rem;
	    left: 0.42rem;
	    overflow: hidden;
	}
	.imgbox3{
		width: 1.92rem;
	    height: 2.93rem;
	    position: absolute;
	    top: 1.12rem;
	    left: 0.32rem;
	    overflow: hidden;
	}
	#backToBookshelf,#againCreate{		
		height: 100%;
		border: none;
		border-radius: 0.2rem;	
		line-height: 100%;
		text-indent: 0.8rem;
		font-size: 0.4rem;
		padding: 0;
		box-shadow: 0 0 5px rgba(127,127,127,.5);
		letter-spacing: 2px;
		font-family: .PingFangSC-Medium;
	}
	#backToBookshelf{
		width: 37.3%;
		background: url(http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/my_bookshelf_my_order_icon_nor.png) no-repeat 18% center;
		background-size: 19.8% 50%;
		color: rgb(151,151,151);
	}
	#againCreate{
		width: 57.3333%;	
		background:#63E0CE url(http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_me_new_book_icon.png) no-repeat 20% center;
		background-size: 13% 45%;
		color: #fff;
		margin-left: 0.32rem;
	}
	.shape_0{ 	/*长图	width/height	*/
		position: absolute; 
		height: 100%;
		left: 50%;
		top: 0;
		transform: translate(-50%);
	}
	.shape_1{ 	/*方图*/
		position: absolute; 
		height: 100%;
		/*width: 100%;*/
		left: 50%;
		top: 0;
		transform: translate(-50%);
	}
	.shape_2{ 	/*横图*/
		position: absolute; 
		width: 100%;
		left: 0;
		top: 50%;
		transform: translate(0,-50%);
	}
	</style>
</head>
<body>
<input type="hidden" id="cId" value="{$cId}">
<input type="hidden" id="coverImg" value="{$coverImg}">
	<div class="container">
		<div class="phtotZhao none">
			<div class="back"></div>
			<div class="erwei">
				<div class="erwei_delete"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_me_add_members_q_r_code_close.png" class="img"></div>
				<div class="chengyuan">添加成员</div>

					<div class="erweima" id="qr1"></div>

				<div class="tianjia_text">
					添加相册成员一起传图<br>
					其他人扫码或截图发给朋友<br>
				</div>
			</div>

		</div>
		<div class="main yes">
			<div style="width: 100%;height: 5px"></div>
			<div class="photo">
				<volist name="bookMsg" id="vo">
					<!-- <input type="hidden" class="bookCoverImgShape" value="{$vo['shape']}"> -->
					<div class="zhaoPhoto" style="position: relative">
					<input type="hidden" value="{$vo.photoBookId}" class="pbid11">
						<if condition="$vo['master'] eq 1">
							<div class="shezhi" style="position: absolute;top:0;right: 0" onclick="productionTeam({$vo.photoBookId})">
								<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_me_set_up_btn_nor.png" class="img">
							</div>
						</if>
						<div class="zhaoImg left">
							<img src="http://www.youyiku-yishu.cn/{$vo.cover}" class="img" style="box-shadow:0 0 6px rgba(127,127,127,.5);">
							<if condition="$vo['coverId'] eq 1">
								<if condition="$vo['personImg']">
									<div class="imgbox1" style="background-color: #fff;">
										<img src="http://www.youyiku-yishu.cn/{$vo.personImg}" class="shape_{$vo['shape']}">
									</div>
									<else/>
									<div class="imgbox1">
									</div>
								</if>
							</if>
							<if condition="$vo['coverId'] eq 2">
								<if condition="$vo['personImg']">
									<div class="imgbox2" style="background-color: #fff;">
										<img src="http://www.youyiku-yishu.cn/{$vo.personImg}" class="shape_{$vo['shape']}">
									</div>
									<else/>
									<div class="imgbox2">
									</div>
								</if>
							</if>
							<if condition="$vo['coverId'] eq 3">
								<if condition="$vo['personImg']">
									<div class="imgbox3" style="background-color: #fff;">
									<img src="http://www.youyiku-yishu.cn/{$vo.personImg}" class="shape_{$vo['shape']}">
									</div>
									<else/>
									<div class="imgbox3">
									</div>
								</if>
							</if>
						</div>
						<div class="zhaoText left">
							<div class="zhaoName">照片书</div>
							<if condition="$vo['status'] eq 1">
							<span class="goumai">已购买</span><span class="zhaopian"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_me_photo_book_icon.png" class="img"></span>
							</if>
							<div class="zhao_text">书名：<span>{$vo.bookName}</span></div>
							<div class="zhao_text">标题：<span>{$vo.title}</span></div>
							<div class="zhao_text">成员：<span>共{$vo.people}人</span></div>
							<div class="zhao_text">页数：<span>{$vo.page}</span></div>
							<div class="chuangTime">创建于&nbsp;<span>{$vo.friendTime}</span>&nbsp;
								<if condition="$vo['master'] eq 1">
								<span class="del_photo" onclick="deleteBook({$vo.photoBookId})">删除该相册</span></if></div>
							<if condition="$vo['status'] eq 1">
								<div class="button">
									<div class="button_left left">
										<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_me_view_logistics_btn_nor.png" class="img" title="查看物流">
									</div>
									<div class="button_right left">
										<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_me_order_details_btn_nor.png" class="img" title="订单详情">
									</div>

								</div>
								<else/>
								<if condition="$vo['master'] eq 1">
								<div class="button">
									<div class="button_left left frind" onclick="inviteFriend({$vo.photoBookId})">
										<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_me_invite_friends_btn_nor.png" class="img" title="邀请好友">
									</div>

										<div class="button_right left" onclick="buyPhotoBook({$vo.photoBookId})">
											<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_me_buy_albums_btn_nor.png" class="img" title="购买相册">
										</div>
								</div></if>
							</if>

						</div>
					</div>
				</volist>
			</div>
			<!--<div>1111</div>-->
			<div class="new_photo" >
				<input type="button" onclick="backToBookshelf();" id="backToBookshelf" value="返回书架">
				<input type="button" onclick="againCreate();" id="againCreate" value="创建新相册">
			</div>
		</div>
		<!-- 制作团队 -->
		<div class="main no none">

		</div>
<div style="height: 50px"></div>
		<div class="footer">
			<input type="hidden" id="pbId" value="{$photoBookId}">
			<ul class="footer_ul">
				<li class="footer_li left" onclick="goIndex()">
					<div class="footer_img"><img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 40.png
"></div>
					<span class="footer_text">继续编辑</span>
				</li>
				<li class="footer_li left" onclick="myBooks()">
					<div class="footer_img"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Path.png"></div>
					<span class="footer_text footer_color">我的</span>
				</li>
				<li class="footer_li left" onclick="goHuodong()">
					<div class="footer_img"><img  class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/photo_book_huodong_icon_nor.png"></div>
					<span class="footer_text">活动</span>
				</li>
			</ul>
		</div>
	</div>
	<script>
		var pbId=$('#pbId').val()
		var WST = ThinkPHP = window.Think = {
			"ROOT"   : "__ROOT__",
		}
		function backToBookshelf(){
			location.href= WST.U('WebApp/Index/index');
		}
		function myBooks(){
			location.href= WST.U('WebApp/PhotoBooks/myBooks', 'pbId='+pbId);
		}
		function againCreate(){
			location.href= WST.U('WebApp/PhotoBooks/goAgainCreate');
		}
		function goIndex(){
			location.href= WST.U('WebApp/PhotoBooks/index', 'photoBookId='+pbId);
		}
		function goHuodong(){
			location.href= WST.U('WebApp/PhotoBooks/goHuodong', 'pbId='+pbId);
		}
		//邀请好友
		function inviteFriend(id){
//			alert(id)
			var container1 = document.getElementById('qr1');
			$('#qr1').empty();
			var svgElement = document.createElement("div"),

					u = "http://www.youyiku-yishu.cn/WebApp/PhotoBooks/inviteFriend.html?photoBookId="+id,
					s = QRCode.generateSVG(u, {
						ecclevel: "M",
						fillcolor: "#FFFFFF",
						textcolor: "#373737",
//						margin: 4,
//						modulesize: 4
					});
			svgElement.appendChild(s);
			container1.appendChild(svgElement);
		}
		//制作团队
		function productionTeam(id){
			location.href= WST.U('WebApp/PhotoBooks/productionTeam','photoBookId='+id);
		}
		//购买本书
		function buyPhotoBook(id){
			location.href= WST.U('WebApp/Orders/buylist','photoBookId='+id);
		}
	$(function(){
		//点击设置
//		$('.shezhi').click(function(){
//			$('.yes').addClass('none');
//			$('.no').removeClass('none');
//		})

		$('.erwei_delete').click(function(){
			$('.phtotZhao').addClass('none');
		})
		$('.frind').click(function(){
			$('.phtotZhao').removeClass('none');

		})
		//点击管理
		$('.guanli').toggle(function(){
			$('.guanli').text('完成')
			$('.delete_member').removeClass('none');
		},function(){
			$('.guanli').text('管理')
			$('.delete_member').addClass('none');
		})

		//点击删除成员
		$('.delete_member').click(function(){
			$(this).parent().addClass('none');
		})

		//点击邀请好友
		$('.add_img').click(function(){
			$('.phtotZhao').removeClass('none');
		})

	})
    function deleteBook(id){
		$.post(Think.U('WebApp/PhotoBooks/deleteBook'),{photoBookId:id}, function(json){
			if(json.status==1){
				location.reload()
			}
		})
	}
	$(".zhaoPhoto").each(function(){
		var bookid = $(this).find(".pbid11").val();
		$(this).find(".zhaoImg").click(function(){
			location.href= WST.U('WebApp/PhotoBooks/index', 'photoBookId='+bookid);
		})
	})
	</script>
	<include file="./Apps/WebApp/View/default/common_js.html" />
</body>
</html>